/*
 * @Description:
 * @Author: dh
 * @Date: 2022-01-24 14:45:19
 * @LastEditors: dh
 * @LastEditTime: 2022-01-24 14:45:20
 */
// .hide()      隐藏 1.延迟(ms) 3.回调函数
// .show()      显示 1.延迟(ms) 3.回调函数
// .toggle()    在hide跟show中来回切换、
// .toggle([speed],[easing],[fn])
$('p').click(function () {
	$('#demo').toggle(300)
})

// .fadeIn()        淡入 fadeIn([speed],[fn])
// .fadeOut()       淡出 fadeOut([speed],[fn])
// .fadeToggle()    两个状态来回切换、
$('p').on('click', function () {
	$(this).next().fadeToggle(500)
})
// .fadeTo()        渐变到指定的透明度、
// .fadeTo([[speed],opacity,[fn]])
$('#demo').fadeTo(600, 0.2)

// 卷帘动图效果、
// $(this).slideUp(ms,fun);     // 卷入
// $(this).slideDown(ms,fun);   // 卷出
// $('ul.demo').slideToggle(500);  // 两种状态间的切换、

// .animate()
// 通过给定的参数自定义动图、(内置队列)
$('#demo').animate(
	{
		width: '+=50px',
		height: '+=50px',
		top: '50px',
		left: '50px',
		opacity: '-=0.3',
	},
	600,
	function () {
		console.log('Hello World~')
	}
)

// .stop()
// 阻止本次运动并直接到目标点、参数：1.阻止本次 2.到目标点
$('#demo').stop(true, true)
// .finish()
// 直接跳到最后的一个目标点、(无参数)
$('#demo').finish()
// .delay()
// 使动图延迟执行、
$('#demo').animate({ top: '+=200px' }, 500).delay(2000).animate({ left: '+=200px' }, 500)
